<template>
  <div class="investmentDetails">
    <div class="investmentDetails_1">
      <div class="investmentDetails_2">
        <div>车贷{{ list.propertyTypeName }}</div>
        <div>{{ list.propertyName }}</div>
        <div>项目编号：{{ list.propertyId }}</div>
        <div>发布时间：{{ list.propertyStarttime }}</div>
      </div>
      <div class="investmentDetails_3">
        <div class="investmentDetails_5">
          <div class="investmentDetails_9">{{ list.yearYield }}</div>
          <div>年化利率</div>
        </div>
        <div class="investmentDetails_5">
          <div>{{ list.propertyDeadline }}个月</div>
          <div>投资期限</div>
        </div>
        <div class="investmentDetails_5">
          <div>{{ list.residueMoney }}元</div>
          <div>剩余可投资金额</div>
        </div>
        <div class="investmentDetails_6">
          <span>认购时间：</span>
          <span>3个月</span>
        </div>
        <div class="investmentDetails_6">
          <span>当前进度：</span>
          <div class="investmentDetails_progress">
          <el-progress
              type="line"
              :stroke-width="8"
              :percentage="((list.propertyResidue-list.residueMoney)/list.propertyResidue*100) | rounding"
              color="red"
            ></el-progress>
          </div>
        </div>
        <div class="investmentDetails_6">
          <span>安全评级：</span>
          <div class="big-star-box">
            <img
              :src="list.propertySafety > 0 ? srcStar : srcNoStar"
              @click="imgItem(1)"
            />
            <img
              :src="list.propertySafety > 1 ? srcStar : srcNoStar"
              @click="imgItem(2)"
            />
            <img
              :src="list.propertySafety > 2 ? srcStar : srcNoStar"
              @click="imgItem(3)"
            />
            <img
              :src="list.propertySafety > 3 ? srcStar : srcNoStar"
              @click="imgItem(4)"
            />
            <img
              :src="list.propertySafety > 4 ? srcStar : srcNoStar"
              @click="imgItem(5)"
            />
          </div>
        </div>
        <div class="investmentDetails_6">
          <span>项目总金额：</span>
          <span>{{ list.propertyResidue }}</span>
        </div>
        <div class="investmentDetails_6">
          <span>收益方式：</span>
          <span>每月等额本息</span>
        </div>
      </div>
      <div class="investmentDetails_4">
        <div class="investmentDetails_7">
          <span
            >当前可用余额：<span class="investmentDetails_sp2"
              >{{ user.user_balance }}&nbsp;&nbsp;</span
            >元</span
          >
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="investmentDetails_sp1" @click="investmentDetails_a"
            >充值</span
          >
        </div>
        <input
          type="text"
          placeholder="请输入投资金额为50的倍数"
          v-model="amount"
        />
        <div class="investmentDetails_8">
          <span
            >预计年收益：<span class="investmentDetails_sp2"
              >{{ amount * list.yearYield * 0.01 }}&nbsp;&nbsp;</span
            >元</span
          >
        </div>
        <button @click="investmentDetails_buttoon">立即投资</button>
      </div>
    </div>
    <div class="investmentDetails_10">
      <div class="investmentDetails_11">
        <div
          :class="
            variable1 == 1 ? 'investmentDetails_pp' : 'investmentDetails_pp2'
          "
          @click="investmentDetails_btu1"
        >
          项目介绍
        </div>
        <div
          :class="
            variable2 == 2 ? 'investmentDetails_pp' : 'investmentDetails_pp2'
          "
          @click="investmentDetails_btu2"
        >
          借款人信息
        </div>
        <div
          :class="
            variable3 == 2 ? 'investmentDetails_pp' : 'investmentDetails_pp2'
          "
          @click="investmentDetails_btu3"
        >
          投资记录
        </div>
        <div
          :class="
            variable4 == 2 ? 'investmentDetails_pp' : 'investmentDetails_pp2'
          "
          @click="investmentDetails_btu4"
        >
          贷后情况
        </div>
      </div>
      <div class="investmentDetails_12">
        <router-view></router-view>
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script>
import axios from "axios";

import Bottom from "./Bottom.vue";
export default {
  data() {
    return {
      propertyId: null,
      list: {}, //项目表
      user: {}, //用户表
      amount: null, //投资金额
      srcStar: "xin1.png",
      srcNoStar: "xing4.png",
      variable1: 1,
      variable2: 1,
      variable3: 1,
      variable4: 1,
    };
  },
  methods: {
    investmentDetails_a() {
      this.$router.push({ path: "Recharge4" });
    },
    investmentDetails_buttoon() {
      if (this.amount > this.user.user_balance) {
        this.$message("您的余额不足,请充值！！！");
        return;
      }
      if (this.amount > this.list.residueMoney) {
        this.$message("金额超过剩余可投金额,请重试！！！");
        return;
      }
      this.$router.push({
        path: "DetermineInvestment",
        query: { amount: this.amount, propertyId: this.propertyId },
      });
    },
    imgItem: function (num) {
      this.imgNum = num;
    },
    investmentDetails_btu1() {
      this.variable1 = 1;
      this.variable2 = 1;
      this.variable3 = 1;
      this.variable4 = 1;
      this.$router.push({
        path: "ProjectIntroduction1",
        query: { propertyId: this.propertyId },
      });
    },
    investmentDetails_btu2() {
      this.variable1 = 2;
      this.variable2 = 2;
      this.variable3 = 1;
      this.variable4 = 1;
      this.$router.push({
        path: "BorrowerInformation2",
        query: { propertyId: this.propertyId },
      });
    },
    investmentDetails_btu3() {
      this.variable1 = 2;
      this.variable2 = 1;
      this.variable3 = 2;
      this.variable4 = 1;
      this.$router.push({
        path: "InvestmentRecords3",
        query: { propertyId: this.propertyId },
      });
    },
    investmentDetails_btu4() {
      this.variable1 = 2;
      this.variable2 = 1;
      this.variable3 = 1;
      this.variable4 = 2;
      this.$router.push({
        path: "PostLoanSituation4",
        query: { propertyId: this.propertyId },
      });
    },
    getSignInformation() {
      this.propertyId = this.$route.query.propertyId;
      //   alert(this.propertyId)
      axios({
        url: "api/invest/queryInvestmentGetById",
        method: "post",
        params: {
          propertyId: this.propertyId,
        },
      }).then((res) => {
        this.list = res.data;
        // console.log(res);
      });
    },
    getSignInformation2() {
      axios({
        url: "api/user/selectUserEntity",
        method: "get",
      }).then((res) => {
        this.user = res.data;
        console.log(res + "sdsd");
      });
    },
  },
  created() {
    this.getSignInformation();
    this.getSignInformation2();
  },
  components: {
    Bottom,
  },
};
</script>

<style>
.investmentDetails_progress {
  width: 200px;
  position: relative;
  margin-top: -20px;
  margin-left: 90px;
}
.investmentDetails_12 {
  float: left;
  width: 100%;
  height: 100%;
}
.investmentDetails_pp {
  width: 10%;
  float: left;
  height: 80px;
  /* margin-left: 10px; */
  background-color: #fff;
  border-top: 3px solid red;
  text-align: center;
  font-size: 120%;
  color: red;
  font-weight: bold;
  line-height: 80px;
  cursor: pointer;
}
.investmentDetails_pp2 {
  width: 10%;
  float: left;
  height: 80px;
  /* margin-left: 10px; */
  background-color: #eeeeee;
  /* border-top: 3px solid red; */
  text-align: center;
  font-size: 120%;
  cursor: pointer;
  color: #999999;
  line-height: 80px;
}
.investmentDetails_11 {
  width: 100%;
  background-color: #eeeeee;
  float: left;
  height: 80px;
}
.investmentDetails_10 {
  float: left;
  width: 80%;
  height: 1000px;
  background-color: white;
  margin-left: 10%;
  margin-top: 40px;
}
.big-star-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 40%;
  margin-top: -30px;
  margin-left: 60px;
}
.big-star-box img {
  vertical-align: top;
  width: 26px;
  height: 26px;
  padding: 0 2px;
}
.investmentDetails_9 {
  color: red;
  font-size: 200%;
}
.investmentDetails_5 div:nth-child(1) {
  float: left;
  font-size: 200%;
  font-weight: bold;
  margin-left: 10%;
  margin-top: 20px;
}
.investmentDetails_5 div:nth-child(2) {
  float: left;
  font-size: 90%;
  color: #999999;
  width: 70%;
  margin-left: 10%;
  margin-top: 10px;
}
.investmentDetails_sp2 {
  color: #171515;
}
.investmentDetails_sp1 {
  cursor: pointer;
  color: #1d8fe1;
}
.investmentDetails_7 {
  float: left;
  width: 80%;
  margin-left: 10%;
  margin-top: 70px;
  color: #999999;
}
.investmentDetails_8 {
  float: left;
  width: 80%;
  margin-left: 10%;
  margin-top: 20px;
  color: #999999;
}
.investmentDetails_4 input {
  float: left;
  width: 80%;
  margin-left: 10%;
  margin-top: 20px;
  height: 40px;
}
.investmentDetails_4 button {
  cursor: pointer;
  float: left;
  width: 60%;
  margin-left: 20%;
  margin-top: 20px;
  color: white;
  background-color: red;
  height: 50px;
  border: 1px solid red;
  font-size: 130%;
}
.investmentDetails_6 span:nth-child(1) {
  color: #999999;
}
.investmentDetails_6 {
  float: left;
  width: 80%;
  height: 40px;
  /* background-color: rgb(38, 180, 185); */
  margin-left: 10%;
  margin-top: 7px;
}
.investmentDetails_5 {
  float: left;
  width: 30%;
  /* background-color: rgb(171, 156, 156); */
  height: 120px;
  margin-left: 2%;
  margin-top: 10px;
}
.investmentDetails_3 {
  float: left;
  width: 58%;
  height: 80%;
  /* margin-top: 2%; */
  /* background-color: rgb(42, 17, 17); */
}
.investmentDetails_4 {
  float: left;
  width: 40%;
  height: 80%;
  margin-top: 1%;
  /* background-color: red; */
  border-left: 1px solid #807878;
}
.investmentDetails_2 div:nth-child(1) {
  float: left;
  background-color: #f39826;
  width: 60px;
  height: 40%;
  color: white;
  font-size: 90%;
  text-align: center;
  line-height: 30px;
  border-radius: 25px;
  -moz-border-radius: 25px;
  margin-top: 23px;
  margin-left: 30px;
}
.investmentDetails_2 div:nth-child(2) {
  float: left;
  height: 40%;
  margin-top: 25px;
  font-size: 120%;
  margin-left: 40px;
  font-weight: bold;
}
.investmentDetails_2 div:nth-child(3) {
  float: left;
  margin-top: 29px;
  margin-left: 40px;
  color: #999999;
}
.investmentDetails_2 div:nth-child(4) {
  float: right;
  margin-top: 29px;
  margin-right: 30px;
  color: #999999;
}
.investmentDetails_2 {
  width: 100%;
  background-color: #eeeeee;
  float: left;
  height: 16%;
}
.investmentDetails_1 {
  float: left;
  width: 80%;
  height: 500px;
  background-color: white;
  margin-left: 10%;
  margin-top: 90px;
}
.investmentDetails {
  background-color: #f6f6f6;
  float: left;
  width: 100%;
  /* height: 10000px; */
}
</style>